<template>
  <div class="flex-full">
    <div class="page-header">
      <el-page-header title="" content="图书列表"></el-page-header>
    </div>
    <div class="data-list">
      <ListTable
        :porpData="porpData"
        @tableCallback="tableCallback"
      ></ListTable>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

import ListTable from '@/components/common/listTable.vue';
import FormTable from '@/components/common/FormTable.vue';
import { demoServer } from '@/api/installServer';
@Component({
  components: { ListTable, FormTable },
})
export default class DemoList extends Vue {
  // 列表配置
  private porpData: any = {
    isCheck: true,
    isSingleSelect: true,
    pageSize: 10,
    currentPage: 1,
    total: 0,
    config: [
      { type: 'string', label: '序号', width: '80', prop: 'key1' },
      { type: 'string', label: '书名', width: '/', prop: 'key2' },
      { type: 'string', label: '作者', width: '/', prop: 'key3' },
      { type: 'string', label: '价格(元)', width: '/', prop: 'key4' },
      { type: 'string', label: '数量(册)', width: '/', prop: 'key5' },
      { type: 'string', label: '入库时间', width: '/', prop: 'key6' },
      { type: 'button', label: '操作', width: '/', prop: 'operate' },
    ],
    data: [],
  };
  // 按钮组
  private btnGroup = {
    edit: {
      name: '编辑',
      type: 'warning',
      emit: 'edit',
      icon: 'el-icon-edit',
    },
    delete: {
      name: '删除',
      type: 'danger',
      emit: 'delete',
      icon: 'el-icon-delete',
    },
  };

  // 选中的数据
  private selectedData: any = [];

  private getDemoList() {
    demoServer.getDemoList().then((res: any) => {
      res.data.list.map((item: any) => {
        item.operate = this.btnGroup;
        return item;
      });
      this.$set(this.porpData, 'data', res.data.list);
      this.$set(this.porpData, 'total', res.data.total);
    });
  }

  // 列表操作回调
  private tableCallback(data: any) {
    switch (data.type) {
      case 'edit':
        break;
      case 'delete':
        break;
      case 'handlePageChange':
        this.getDemoList();
        break;
      case 'trSelectChange':
        this.selectedData = data.curVal;
        break;
      default:
        break;
    }
  }

  private mounted() {
    this.getDemoList();
  }
}
</script>

<style scoped lang="less"></style>
